<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Document</title>
<script type="text/javascript">

var paragraphCounter = 0;
var refCounter = 0;
var iLCounter = 0;


function edit(a)
{
	/* alert(a); */
	var ra = document.getElementsByTagName("div");
	for (var i = 0; i < ra.length; i++) {
		ra[i].style.display = "";
	}
	var ra = document.getElementsByTagName("h1");
	for (var i = 0; i < ra.length; i++) {
		ra[i].style.display = "";
	}
	var rb = document.getElementsByTagName("input");
	for (var i = 0; i < rb.length; i++) {
		rb[i].style.display = "none";
	}
	var rc = document.getElementsByTagName("textarea");
	for (var i = 0; i < rc.length; i++) {
		rc[i].style.display = "none";
	}
	
	document.getElementById(a + "_edit").style.display = "";
	var str = document.getElementById(a).innerHTML;
	var pattern = /<br>/g;
	document.getElementById(a + "_edit").value = str.replace(pattern,"\n");
	document.getElementById(a).style.display = "none";
}

function editSubmit(a){
	if(document.getElementById(a + "_edit").value != ""){
		var str = document.getElementById(a + "_edit").value;
		var pattern = /\r|\n/g;
		document.getElementById(a).innerHTML = str.replace(pattern,"<br>");
	} else {
		if(a.substring(a.length-7,a.length) == "content"){
			document.getElementById(a).innerHTML = "put some text here.";
		} else {
			removeElement(a);
			removeElement(a + "_edit");
		}
		/*if(a.substring(2,3))*/
	}
}

function createElement(container, type, attri, style, internalHTML)
{ 
    var e = document.createElement(type);
    document.getElementById(container).appendChild(e); 
    if (attri) { 
        for (var k in attri) { 
            if (k == 'class') e.className = attri[k]; 
            else if (k == 'id') e.id = attri[k]; 
    	else e.setAttribute(k, attri[k]); 
    	} 
    } 
    if(style)
	{ 
		for (var k in style) e.style[k] = style[k];
	} 
    if(internalHTML) {
		e.appendChild(document.createTextNode(internalHTML));
	} 
    return e; 
}  

function addParagraph()
{
	/* add new paragraph container */
    var newElement = createElement(
		'paragraphs',
		'div', 
		{
			'class': 'paragraph', 
			id: 'p_' + paragraphCounter.toString(10), 
			name: 'p_' + paragraphCounter.toString(10)
		},
		{}
	);
	/* add new paragraph content */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10),
		'div',
		{
			'class': 'p_content', 
			id: 'p_' + paragraphCounter.toString(10) + '_content', 
			name: 'p_' + paragraphCounter.toString(10) + '_content',
			'onclick': 'edit(\'p_' + paragraphCounter.toString(10) + '_content\')'
		},
		{}, 
		'Here is the Paragraph #' + paragraphCounter.toString(10)
	);
	/* add new paragraph content editor */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10),
		'textarea',
		{
			'class': 'p_content_edit', 
			'rows': 6,
			id: 'p_' + paragraphCounter.toString(10) + '_content_edit', 
			name: 'p_' + paragraphCounter.toString(10) + '_content',
			'onchange': 'editSubmit(\'p_' + paragraphCounter.toString(10) + '_content\')'
		},
		{
			display: 'none'
		}
	);
	/* add Delete link */
	var newElement = createElement(
		'paragraphs',
		'a',
		{
			id: 'p_' + paragraphCounter.toString(10) + '_del_link',
			'href': '#',
			'onclick': 'removeElement(\'p_' + paragraphCounter.toString(10)+'\');removeElement(\'p_' + paragraphCounter.toString(10)+'_del_link\')'
		},
		{}
		,
		'[- This Paragraph]'
	);	
	/* add new paragraph ref container */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10),
		'div',
		{
			'class': 'p_ref', 
			id: 'p_' + paragraphCounter.toString(10) + '_refs',
		},
		{}
	);
	/* add the ref link */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10) + '_refs',
		'a',
		{
			'href': '#',
			'onclick': 'addRef(\'p_'+paragraphCounter.toString(10)+'_refs\',\''+paragraphCounter.toString(10)+'\')'
		},
		{}
		,
		'[+ New Ref]'
	);
	/* add new paragraph internal_link container */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10),
		'div',
		{
			'class': 'p_internal_link', 
			id: 'p_' + paragraphCounter.toString(10) + '_internal_links',
		},
		{}
	);
	/* add the internal_link link */
	var newElement = createElement(
		'p_' + paragraphCounter.toString(10) + '_internal_links',
		'a',
		{
			'href': '#',
			'onclick': 'addIL(\'p_'+paragraphCounter.toString(10)+'_internal_links\',\''+paragraphCounter.toString(10)+'\')'
		},
		{}
		,
		'[+ New Internal Link]'
	);

	paragraphCounter++;
}

function addRef(container,pid){
	var newElement = createElement(
		container,
		'div', 
		{
			'class': 'ref', 
			id: 'p_' + pid + '_ref_' + refCounter.toString(10), 
			name: 'p_' + pid + '_ref', 
			'onclick': 'edit(\'p_' + pid + '_ref_' + refCounter.toString(10) + '\')'
		},
		{}, 
		'Here is the Ref #' + refCounter.toString(10)
	);
	var newElement = createElement(
		container,
		'input', 
		{
			'class': 'ref_edit', 
			id: 'p_' + pid + '_ref_' + refCounter.toString(10) + '_edit', 
			name: 'p_' + pid + '_ref',  
			'onchange': 'editSubmit(\'p_' + pid + '_ref_' + refCounter.toString(10) + '\')'
		}
		,
		{
			display:'none'
		}
	);
	refCounter++;
}

function addIL(container,pid){
	var newElement = createElement(
		container,
		'div', 
		{
			'class': 'internal_link', 
			id: 'p_' + pid + '_internal_link_' + iLCounter.toString(10), 
			name: 'p_' + pid + '_internal_link', 
			'onclick': 'edit(\'p_' + pid + '_internal_link_' + iLCounter.toString(10) + '\')'
		},
		{}
		, 
		'Here is the Internal Link #' + iLCounter.toString(10)
	);
	var newElement = createElement(
		container,
		'input', 
		{
			'class': 'internal_link_edit', 
			id: 'p_' + pid + '_internal_link_' + iLCounter.toString(10) + '_edit', 
			name: 'p_' + pid + '_internal_link', 
			'onchange': 'editSubmit(\'p_' + pid + '_internal_link_' + iLCounter.toString(10) + '\')'}, 
		{
			display:'none'
		}
	);
	iLCounter++;
}
function removeElement(elemID) {
    var elem = document.getElementById(elemID);
    elem.parentNode.removeChild(elem);
}
</script>
<style>
a, a:link, a:hover, a:visited {
	color:#0000FF;
}
body{
	font-family:"Times New Roman", Times, serif;
	font-size:1em;
}
#container {
	clear:both;
}
#title{
	font-size:20px;
	padding: 1px 2px;
	margin: 0;
}
#title_edit {
	font-size:20px;
	font-weight:bold;
	background:#EFFEE2;
	/* border:1px solid #666666; */
	font-family:"Times New Roman", Times, serif;
	border-top:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
}
#paragraphs {
	border-bottom:1px dotted #CCCCCC;
	padding: 0 0 0.5em 0;
	margin: 0 0 0.5em 0;
}
.paragraph {
	border: #666666 2px solid;
	width:600px;
	padding:4px;
	margin:4px 0px;
}
.p_content {
	margin:4px 4px;
}
.p_content_edit {
	margin:4px 4px;
	background:#EFFEE2;
	width:560px;
	font-size:1em;
	font-family:"Times New Roman", Times, serif;
	border-top:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
}
.ref, .internal_link {
	margin:4px 4px;
	font-size:1em;
}
.ref_edit, .internal_link_edit {
	margin:4px 4px;
	background:#EFFEE2;
	border-top:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
	width:560px;
	font-family:"Times New Roman", Times, serif;
	font-size:1em;
}
</style>
</head>
<body>
<div id="container">
	<h1 id="title" onclick="edit('title');">Test</h1>
	<input id="title_edit" style="display:none" name="title_edit" onchange="editSubmit('title')"/>
	<div>Creator: someuser &nbsp;&nbsp; Update Time: sometime</div>
	<div id="paragraphs">
	</div>
	<a href="#" onclick="addParagraph();">[++ New Paragraph]</a>
	<div>Father Node: somenode</div>
	<input type="button" value="Submit" />
</div>
</body>
</html>

<!-- 
<div class="paragraph" id="p_0" name="p_0">
	<div id="p_0_content" class="p_content" onclick="edit('p_0_content');" name="p_0_content">some paragraph contents here.</div>
	<textarea id="p_0_content_edit" class="p_content_edit" rows="6" style="display:none;" name="p_0_content" onchange="editSubmit('p_0_content')"></textarea>
	<div id="p_0_refs" class="p_ref">
		<a href="#" onclick="addRef('p_0_refs','0');">[Add new Ref]</a>
	</div>
	<div id="p_0_internal_links" class="p_internal_link">
		<a href="#" onclick="addIL('p_0_internal_links','0');">[Add new Internal Link]</a>
	</div>
</div>
-->
